<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" height="400" persistent width="600">
      <template v-slot:activator="{ props }">
        <v-btn class="btn" color="rgba(191, 219, 255)" v-bind="props">
          上传动态
        </v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="text-h5">猫猫动态</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="14" md="6" sm="8">
                <v-text-field v-model="catData.name" label="请输入猫猫名称*" required></v-text-field>
              </v-col>
              <v-col cols="14" md="6" sm="8">
                <v-autocomplete v-model="catData.gender" :items="['公', '母']" label="性别" multiple></v-autocomplete>
              </v-col>
              <v-col cols="14" md="6" sm="8">
                <v-text-field v-model="catData.breed" label="请输入猫猫品种" required></v-text-field>
              </v-col>
              <v-col cols="14" md="6" sm="8">
                <v-autocomplete v-model="catData.species" :items="['猫', '鹅']" label="物种" multiple></v-autocomplete>
              </v-col>
              <v-col cols="14" md="6" sm="8">
                <v-text-field v-model="catData.age" label="年龄" required></v-text-field>
              </v-col>
              <v-col cols="14" md="6" sm="8">
                <v-autocomplete v-model="catData.status" :items="['未领养', '已领养']" label="领养状态"
                                multiple></v-autocomplete>
              </v-col>

              <div class="popup-body">
                <div class="popup-section-inline">
                  <span class="popup-subtitle">上传动态：</span>
                  <img alt="img" src="https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/icon/albumIcon.png"
                       style="vertical-align: middle;width: 90px;"
                       @click="selectImage"/>
                  <img alt="img" src="https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/icon/cameraIcon.png"
                       style="vertical-align: middle;width: 90px;margin-left: 20px;"
                       @click="selectImage"/>
                  <div style="width:100%;text-align: center;">

                  </div>
                </div>
              </div>
              <v-textarea v-model="catData.description" label="描述信息："></v-textarea>
            </v-row>
          </v-container>
          <small></small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue-darken-1" variant="text" @click="closeDialog">
            关闭
          </v-btn>
          <v-btn color="blue-darken-1" variant="text" @click="saveData">
            保存
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>
<script lang="ts">
import axios from 'axios';

export default {
  data: () => {
    return {
      dialog: false,
      catData: {
        name: '',
        gender: [],
        species: [],//物种
        breed: '',//品种
        age: '',
        status: [],//领养状态
        description: '',
        imageFiles: [] as File[],

      },
      // 其他数据...
    };
  },
  methods: {
    closeDialog() {
      this.dialog = false;
    },
    selectImage() {//选择图片
      const input = document.createElement('input');
      input.type = 'file';
      input.onchange = e => {
        const files = (e.target as HTMLInputElement).files;
        if (files) {
          this.catData.imageFiles = Array.from(files); // 将文件添加到数组中
        }
      };
      input.click();
    },
    saveData() {
      // 在这里添加保存数据的逻辑
      const formData = new FormData();
      formData.append('name', this.catData.name);
      formData.append('species', this.catData.species.join(','));
      formData.append('breed', this.catData.breed);
      formData.append('age', this.catData.age);
      formData.append('gender', this.catData.gender.join(','));
      formData.append('description', this.catData.description);
      formData.append('status', this.catData.status.join(','));
      // if (this.catData.image) {
      //   formData.append('image', this.catData.image, this.catData.image.name);
      // }
      this.catData.imageFiles.forEach((file, index) => {
        formData.append(`imageFiles[${index}]`, file, file.name);
      });

      // 替换为您的后端服务 URL
      const url = 'http://47.113.189.87:8080/animals/uploadAnimal';

      axios.post(url, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        // 处理响应
        this.dialog = false;
      }).catch(error => {
        // 处理错误
        console.error(error);
      });
      // this.dialog = false;
    },
  },
};
</script>

<style scoped>
.popup-section-inline {
  text-align: left;
  margin-left: 45px;
}

.btn {
  margin-top: 27px;
  width: 166px;
  height: 66px;
  color: #FFD1DC;
  margin-right: -15px;
}
</style>
